import { DownloadOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Flex, Modal, Space } from 'antd';
import React, { useState } from 'react';
import './Style/ChatRoom.less';
import { queryRecoverContact, exportRecoverContact } from "@/services/RecoverContact";

// 定义 ChatRoom 组件
const ChatRoom: React.FC = () => {
  // 定义状态变量，控制导出弹窗的显示状态
  const [isExportRecoverContactOpen, setIsExportRecoverContactOpen] = useState(false);
  // 定义状态变量，标识导出操作是否正在进行
  const [isExporting, setIsExporting] = useState(false);

  // 定义导出联系人数据的方法
  const handleExportContact = async () => {
    setIsExporting(true); // 设置导出状态为进行中
    try {
      // 调用导出 API
      const response = await exportRecoverContact();
      if (response.success) {
        // 创建一个下载链接并触发下载
        const link = document.createElement('a');
        link.href = '/api/export/download?path=' + encodeURIComponent(response.data);
        document.body.appendChild(link); // 添加到文档
        link.click(); // 触发点击事件
        document.body.removeChild(link); // 下载完成后移除
      }
    } catch (error) {
      console.error(error); // 捕获并打印错误信息
    }
    setIsExporting(false); // 结束导出状态
    setIsExportRecoverContactOpen(false); // 关闭弹窗
  };

  // 定义表格的列配置
  const columns: ProColumns<ChatRoomItem>[] = [
    {
      title: '昵称', // 表头名称
      dataIndex: 'nickname', // 数据字段名
      align: 'center', // 对齐方式
      width: '500px', // 列宽度
    },
    {
      dataIndex: 'remark', // 数据字段名
      title: '备注', // 表头名称
      align: 'center', // 对齐方式
      width: '500px', // 列宽度
    },
    {
      dataIndex: 'alias', // 数据字段名
      title: '微信号', // 表头名称
      search: false, // 不允许搜索
      align: 'center', // 对齐方式
    }
  ];

  // 返回组件的 JSX 结构
  return (
    <PageContainer>
      {/* 表格组件，用于显示已删除好友列表 */}
      <ProTable<ChatRoomItem>
        columns={columns} // 配置列
        cardBordered={{
          search: true, // 启用搜索边框
          table: true, // 启用表格边框
        }}
        request={async (params) => {
          try {
            // 调用查询 API 获取数据
            return queryRecoverContact(params);
          } catch (error) {
            console.error(error); // 捕获并打印错误信息
            return []; // 返回空数据
          }
        }}
        revalidateOnFocus={false} // 禁用焦点重验证
        rowKey="chatRoomName" // 每行的唯一标识
        search={{
          labelWidth: 'auto', // 搜索框自动适配宽度
        }}
        options={false} // 不显示工具栏选项
        pagination={{
          pageSize: 10, // 每页显示 10 条
          showSizeChanger: false, // 禁用分页大小调整
        }}
        headerTitle="已删除好友列表" // 表格标题
        toolBarRender={() => [
          // 工具栏中的导出按钮
          <Button
            onClick={() => setIsExportRecoverContactOpen(true)} // 点击打开弹窗
            key="button"
            icon={<DownloadOutlined />} // 图标
            type="primary" // 按钮类型
          >
            导出
          </Button>,
        ]}
      />
      {/* 弹窗组件，用于确认导出操作 */}
      <Modal
        title="导出已删除好友" // 弹窗标题
        open={isExportRecoverContactOpen} // 弹窗是否可见
        footer={null} // 不显示底部按钮
        onCancel={() => setIsExportRecoverContactOpen(false)} // 点击关闭弹窗
      >
        {/* 提示信息 */}
        <p style={{ padding: '15px' }}>
          即将导出已删除好友列表数据，请导出后妥善保管，以防信息泄露或丢失！
        </p>
        {/* 弹窗底部按钮布局 */}
        <Flex justify="flex-end">
          <Space>
            {/* 取消导出按钮 */}
            <Button disabled={isExporting} onClick={() => setIsExportRecoverContactOpen(false)}>
              取消导出
            </Button>
            {/* 开始导出按钮 */}
            <Button
              type="primary"
              loading={isExporting} // 按钮加载状态
              disabled={isExporting} // 是否禁用
              onClick={() => handleExportContact()} // 点击触发导出
            >
              开始导出
            </Button>
          </Space>
        </Flex>
      </Modal>
    </PageContainer>
  );
};

// 导出 ChatRoom 组件
export default ChatRoom;
